
<template>
  <div class="login-box fill">
    <div class="tp">
      <div class="fluid flex flex-align-items flex-between">
        <div class="txt">
          <p>登录：</p>
          <p class="en">LOGIN</p>
        </div>
        <div class="back btn cursor flex flex-align-items flex-justify-content" 
        v-if="formType != 'login'"
        @click="switchType('login')">
          <img src="../../img/common/back.png" class="icon">返回登录
        </div>
        <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin"
            data-size="large" data-logo_alignment="left" v-else>
        </div>
        <!-- <div class="google btn cursor flex flex-align-items flex-justify-content" >
          <img src="../../img/common/google.png" class="icon">Google 登录/注册
        </div> -->
        <!-- 谷歌登录配置信息 -->
        <div id="g_id_onload" data-client_id="372163859517-oqp5ivv531h05blpt2706gq2b9cc2ku4.apps.googleusercontent.com"
            data-context="signin" data-ux_mode="popup" data-callback="onSignIn" data-auto_select="true"
            data-itp_support="true" style="position: absolute;">
        </div>

    
      </div>
    </div>
    <div class="inp-box">
      <div class="fluid flex flex-justify-content">
        <div class="form">
          <div class="fg flex flex-align-items" v-if="formType == 'register'">
            <p class="lbl">姓名</p>
            <input type="text" v-model="form.nickName" placeholder="请输入...">
          </div>
          <div class="fg flex flex-align-items">
            <p class="lbl">电子邮箱</p>
            <input type="text" v-model="form.email" placeholder="请输入...">
          </div>
          <div class="fg flex flex-align-items" v-if="formType == 'forget'">
            <p class="lbl">邮箱验证码</p>
            <input type="text" v-model="form.emailCode" placeholder="请输入...">
          </div>
          <div class="fg flex flex-align-items">
            <p class="lbl">密码</p>
            <input type="password" v-model="form.password" placeholder="请输入...">
          </div>
          <div class="fg flex flex-align-items" v-if="formType != 'login'">
            <p class="lbl">确认密码</p>
            <input type="password" v-model="form.passwordAgain" placeholder="请输入...">
          </div>
          <div class="fg flex flex-align-items">
            <p class="lbl">验证码</p>
            <input type="text" v-model="form.code" placeholder="请输入...">
            <div class="code cursor" @click="getCode">
              <img :src="codeUrl" class="fill" v-if="codeUrl">
            </div>
          </div>
          <div class="fg flex flex-align-items" v-if="formType == 'login'">
            <p class="lbl"></p>
            <div class="flex flex-between">
              <div class="check flex flex-align-items">
                <input type="checkbox" id="agree" class="checkBox" checked>
                <p>保存登录信息</p>
              </div>
              <p class="forget cursor">忘记密码?</p>             
              
            </div>
          </div>
          <div class="fg flex btns">
            <p class="lbl"></p>
            <div class="flex logOrReg flex-between">
              <template v-if="formType == 'login'">
                <p class="flex flex-align-items flex-justify-content cursor" @click="login">
                  <img src="../../img/common/log.png">登录
                </p>
                <p class="flex flex-align-items flex-justify-content cursor" @click="switchType('register')">
                  <img src="../../img/common/reg.png">注册
                </p>
              </template>
              <p class="flex flex-align-items flex-justify-content cursor register" 
              @click="register"
              v-if="formType == 'register'">
                <img src="../../img/common/reg1.png">确认注册
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  
  module.exports = {
    data: function () {
      return {
        formType:'login',
        form:{
          nickName:'zgw',
          email:'164902265@qq.com',
          password:'py179hao',
          passwordAgain:'py179hao',
          code:'',
          uuid:'',
          googleUserCode:''
        },
        codeUrl:''
      }
    },
    methods:{
      googleLogin(data){
        let { code, msg, googleUser, googleUserCode, sysUser, token } = data;
        console.log(data);
        if (code !== 200) {
            // 用户已被停用 或者 其他不可预见的异常
            console.log(msg);
            return;
        }

        if (!googleUser) {
            // 谷歌登录失败:概率极低(多半是配置错误)
            return;
        }

        if (!sysUser) {
            //当前的谷歌账号没有关联本网站的账号
            this.addNotice('请注册账号与该谷歌账关联','info');
            this.formType = 'register';
            // 1.提示使用账号(邮箱)密码登录,完成登录后绑定谷歌账号
            // 2.提示该谷歌账号注册本网站,需要参数googleUserCode
            return;
        }

        // 得到token
        console.log(token)
      },
      addNotice(msg,type){
        this.$emit('call-add-notice',msg,type);
      },
      getCode(){
        axios.get(dataUrl + '/captchaImage').then((res) => {
          // console.log(res.data);
          this.codeUrl = 'data:image/gif;base64,' + res.data.img;
          this.form.uuid = res.data.uuid;
          // console.log(this.form);
        })  
      },
      login(){
        console.log(1);
        if(!this.checkForm('email','电子邮箱')){
          return false;
        }
        if(!this.checkForm('password','密码')){
          return false;
        }
        if(!this.checkForm('code','验证码')){
          return false;
        }
        return false;
        axios.get(dataUrl + '/login',this.form).then((res) => {
          console.log(res.data);
          
        })  
      },
      resetForm(){
        this.form = {
          nickName:'',
          email:'',
          password:'',
          passwordAgain:'',
          code:'',
          uuid:'',
          googleUserCode:''
        };
      },
      switchType(type){
        this.resetForm();
        this.formType = type;
      },
      checkForm(key,label){
        
        if(!this.form[key].replace(/\s+/g,'').length){
          console.log(this.form[key],label);
          this.addNotice('请输入' + label,'info');
          return false;
        }else{
          return true;
        }
      },
      register(){
        if(this.form.password != this.form.passwordAgain){
          this.addNotice('两次密码输入不一致','info');
          return false;
        }
        axios.post(dataUrl + '/novel/user/register',this.form).then((res) => {
          console.log(res.data);
          if(res.data.code != '200'){
            this.addNotice(res.data.msg,'info');
          }else{
            this.addNotice('注册成功','success');
            this.resetForm();
          }
        })
      }
    },
    created: function () {
      this.getCode();
      
    }
  }
</script>
<style>
  .login-box{
    position: fixed;
    z-index: 10;
    top: auto;
    bottom: 0;
    left: 0;
    height: calc(100vh - 100px - 1px);
    background: #F6F6F6;
  }
  .login-box .tp{
    background-color: #Fff;
  }
  .login-box .tp .fluid{
    height: 15vh;
    max-height: 193px;
  }
  .login-box .tp .txt{
    font-size: 40px;
    font-weight: bold;
    position: relative;
  }
  .login-box .tp .txt .en{
    position: absolute;
    top: 16px;
    left: 58px;
    color: #BFC0EA;
  }
  .login-box .btn{
    width: 123px;
    height: 40px;
    border-radius: 40px;
    background: #BFC0EA;
  }
  .login-box .back{
    color: #4F46E5;
  }
  .login-box .back img{
    width: 14px;
    margin-right: 11px;
  }
  .login-box .google{
    width: 183px;
    background: #F5F5F5;
    font-size: 14px;
  }
  .login-box .google .icon{
    width: 16px;
    margin-right: 11px;
  }

  .inp-box{
    padding-top: 60px;
  }
  .inp-box .form{
    width: 434px;
  }
  .inp-box .form .fg + .fg{
    margin-top: 30px;
  }
  .inp-box .form .lbl{
    width: 68px;
    text-align: right;
    margin-right: 20px;
  }
  .inp-box .form .lbl + input,
  .inp-box .form .lbl + .flex{
    flex: 1; 
  }
  .inp-box .form .code{
    width: 115px;
    height: 40px;
    margin-left: 12px;
    position: relative;
  }
  .inp-box .form .fg>input{
    background: #FFFFFF;
    border-bottom: 1px solid #4F46E5;
    line-height: 40px;
    
    padding-left: 16px;
  }

  .inp-box .form .fg .checkBox{
    width: 16px;
    border: 1px solid #4F46E5;
    height: 16px;
    background: #BFC0EA;
    /* -webkit-appearance:auto; */
    position: relative;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 10px;
  }

  .inp-box .form .fg .checkBox:checked {
    background-color: #4F46E5;
    border-color: #4F46E5;
  }
  
  .inp-box .form .fg .checkBox:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    font-weight:bold;
    color: white;
  }
  .inp-box .form .fg .forget{
    color: #4F46E5;
  }
  .inp-box .form .fg.btns .flex p{
    width: calc(50% - 10px);
    height: 40px;
    border-radius: 40px;
  }
  .inp-box .form .fg .logOrReg p img{
    width: 14px;
    margin-right: 11px;
  }
  
  .inp-box .form .fg .logOrReg p:last-child{
    background: #BFC0EA;
    color: #4F46E5;
  }
  .inp-box .form .fg .logOrReg p:first-child{
    background: #4F46E5;
    color: #fff;
  }

  @media(max-width: 1600px){
    .login-box .tp .txt{
      font-size: 32px;
    }
    .login-box .tp .txt .en{
      top: 12px;
      left: 48px;
    }
  }
  
  @media(max-width: 1200px){
    .login-box{
      height: calc(100vh - 80px - 1px);
    }
  }
  
  @media(max-width: 1024px){
    .login-box .tp .txt{
      font-size: 26px;
    }
    .login-box .tp .txt .en{
      top: 8px;
      left: 36px;
    }
  }
  @media(max-width: 767px){
    .login-box{
      height: calc(100vh - 90px - 1px);
    }
    .login-box .tp .txt{
      font-size: 20px;
    }
    .login-box .tp .txt .en{
      top: 6px;
      left: 24px;
    }
    .login-box .google{
      font-size: 12px;
      height: 32px;
      width: 150px;
    }
    .login-box .google .icon{
      width: 13px;
      margin-right: 8px;
    }
  }
</style>
